<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Image Gallery</title>
	<style>
		#imageGallery{
			/* list-style:none; */
		}
		#imageGallery li{
			/* display:inline; */
		}
	</style>
</head>
<body>
	<h1>Snapshots</h1>
	<ul id="imageGallery">
		<!-- onclick="functinonName(); return fals; alert(1);" 里面可以放任意多个js语句 -->
		<li><a data="360.png">360</a></li>
		<li><a data="chui1.jpg">chui1</a></li>
		<li><a data="chui2.jpg">chui2</a></li>
		<li><a data="chui3.jpg">chui3</a></li>
	</ul>
	<div id="createDOM">
	</div>
<script>
	var log = function(msg){console.log(msg);}
	var preImg = null;
	var imgPreUrl = "/Users/levy/Documents/images/";

	//你不应该对html结构抱有太多的假设,因此检查是必要的,只是,检查多少,视具体情况而定
	function showPic(pic){
		var placeholder = document.getElementById('placeholder');
		if(!placeholder) return false;

		if(preImg){
			var text = preImg.getAttribute('data');
			preImg.firstChild.nodeValue = text.split('.')[0];
		}
		preImg = pic;
		pic.childNodes[0].nodeValue = 'selected';

		//改变图片
		var data = pic.getAttribute('data');
		placeholder.setAttribute('src',imgPreUrl + data);

		//改变文本
		var desc = document.getElementById('description');
		//要有文本才有childNodes[0],也可写作firstChild, lastChild
		if(desc)
			desc.firstChild.nodeValue = data;
		return true;
	}
	
	//在xx元素之后插入,用到了parentNode,nextSibling两个关键api
	function insertAfter(newEle, targetEle){
		var parent = targetEle.parentNode;
		if(parent.lastChild == targetEle){
			parent.appendChild(newEle);
		}
		else{
			parent.insertBefore(newEle, targetEle.nextSibling);
		}
	}

	//通用函数:添加一个window.onload时要执行的函数
	function addLoadEvent(func){
		var oldOnload = window.onload;
		if(typeof window.onload != 'function'){
			window.onload = func;
		}
		else{
			window.onload = function(){
				oldOnload();
				func();
			}
		}
	}


	function prepareGallery(){
		if(!document.getElementById || !document.getElementsByTagName)
			return false;
		//这样的话,图片删除掉,页面上找不到id为imageGallery的元素,代码也不会出错
		if(!document.getElementById('imageGallery'))
			return false;
		//必要的检查之后,可以安心写核心功能了
		var gallery = document.getElementById('imageGallery');
		var links = gallery.getElementsByTagName('a');
		for(var i = 0; i < links.length; i++){
			links[i].onclick = function(){
			//this 表示与onclick关联的那个元素
				//阻止a标签默认的href事件
				return !showPic(this);
				//return false;
			}
		}

	}

	//动态创建图片显示地及文本说明
	function preparePlaceholder(){
		if(!document.createElement || ! document.createTextNode) return false;
		if(!document.getElementById) return false;

		var gallery = document.getElementById('imageGallery');
		if(!gallery) return false;

		var img = document.createElement('img');
		img.setAttribute('id','placeholder');
		img.setAttribute('alt','Image Gallery');

		var desc = document.createElement('p');
		desc.setAttribute('id','description');
		var desc_txt = document.createTextNode('choose an image with mouse or keyboard');
		desc.appendChild(desc_txt);

		//HTML-DOM
		//document.body.appendChild(img);
		//document.body.appendChild(desc);

		//在xx元素之前插入parentNode.insertBefore(new,target);
		//gallery.parentNode.insertBefore(img,gallery);
		//gallery.parentNode.insertBefore(desc,gallery);

		//但我们要做的是:在xx元素之后插入,需要自定义一个函数
		insertAfter(img,gallery);
		insertAfter(desc,img);
	}

	window.onload = function(){
		countBodyChildren();
		prepareGallery();
		preparePlaceholder();

		//为链接带上href属性,这里是偷了个懒,其实是应该写在a标签里的,不然js被禁了以后,link完全失效了
		var links = document.getElementsByTagName('a');
		for(var i = 0; i < links.length; i++){
			var data = links[i].getAttribute('data');
			links[i].setAttribute('href', imgPreUrl + data);
		}

	};

	function countBodyChildren(){
		var body = document.getElementsByTagName('body')[0];
		var childs = body.childNodes;
		//元素的第一个子节点,是文本节点,也即标签所包含的文本
		childs[0].nodeValue = 'nodeValue of body element';
		log(childs);
		//nodeType 元素节点=1,属性节点=2,文本节点=3;据说一共有12个可能值
		for(var i=0; i<childs.length; i++){
			log(childs[i].nodeType);
		}
	}

	//学习动态创建元素及文本,需要在console里调用一下来查看效果
	function createDOM(){
		var div = document.getElementById('createDOM');
		//此时para是文档碎片document fragement
		var para = document.createElement('p');
		//插入元素,此时没有文本
		div.appendChild(para);
		var txt = document.createTextNode('hello text in p');
		para.appendChild(txt);

		//一个更复杂的例子:
		//This is <em>my</em> content.
		var p = document.createElement('p');
		var txt_start = document.createTextNode('This is ');
		var txt_end = document.createTextNode(' content.');

		var em = document.createElement('em');
		var em_txt = document.createTextNode('my');
		em.appendChild(em_txt);

		//不支持链式调用
		p.appendChild(txt_start);
		p.appendChild(em);
		p.appendChild(txt_end);
		div.appendChild(p);
	}
</script>
</body>
</html>
